---
const { collection } = Astro.props;

export async function createCollection() {
  // moved this fetch call outside `data` function so that we don't call it for every single page (permalink)
  const episodes = await fetch('https://www.learnwithjason.dev/api/schedule')
    .then((res) => res.json());

  return {
    // `data` function must return an array (https://github.com/snowpackjs/astro/blob/main/docs/api.md#createcollection)
    async data({params}) {
      return episodes.filter(episode => episode.slug.current === params.slug);
    },
    pageSize: 10,
    routes: episodes.map((episode) => ({ slug: episode.slug.current })),
    // permalink gets "params" which would contain the object we returned from `routes`
    permalink: ({ params }) => `/schedule/${params.slug}`
  }
}
---

<!doctype html>
<html lang="en">
  <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <title>Astro</title>

      <link rel="icon" type="image/svg+xml" href="/favicon.svg">

      <link rel="stylesheet" href="/style/global.css">
      <link rel="stylesheet" href="/style/home.css">

      <style>
          header {
              display: flex;
              flex-direction: column;
              gap: 1em;
              max-width: min(100%, 68ch);
          }
          pre {
            width: 500px;
            overflow: scroll;
          }
      </style>
  </head>
  <body>
      <main>
        <pre>
          {JSON.stringify(collection.data, null, 2)}
        </pre>
      </main>
  </body>
</html>

